<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.top{
				background: linear-gradient(to top,#ebebeb,#f9f9f9,#ffffff);
			}
			.header{
				width: 960px;
				margin: 0 auto;
			}
			
			li{
				list-style: none;
				display: inline-block;
			}
			li a{
				color: black;
				text-decoration: none;
			}
			li a:hover{
				color: red;
			}
			.clearfix:after{
				display: table;
				clear: both;
				content: "";
			}
			.t1{
				float: left;
				margin-left: 5px;
				margin-right: 5px;
			}
			.t2{
				float: left;
				margin-left: 5px;
				margin-right: 5px;
			}
			.t3{
				float: left;
				margin-left: 5px;
				margin-right: 5px;
			}
			/*.header{
				border: 1px solid red;
			}*/
			.logo{
				float: left;
				margin-top: 6px;
			}
			li{
				line-height: 60px;
				height: 60px;
			}
			.neirong{
				float: left;
				margin-left: 30px;
				position: relative;
			}
			.nav-right{
				float: right;
				margin-top: 18px;
			}
			/*.dd{
				position: relative;
			}*/
			
			.k1 a{
				display: inline-block;
			}
			.k2 a{
				display: inline-block;
			}
			.pic1{
				display: inline-block;
				background: url(img/header_03.png) no-repeat 0px 0px;
				height: 30px;
				width: 120px;
				position: absolute;	
				top: 0px;
			}
			.pic2{
				display: inline-block;
				background: url(img/header_07.png) no-repeat 0px 0px;
				height: 30px;
				width: 120px;
				position: absolute;	
				top: 0px;
			}
			@keyframes zhuan{
				0%{
					width: 0px;
				}
				25%{
					width: 30px;
				}
				50%{
					width: 60px;
				}
				75%{
					width: 90px;
				}
				100%{
					width: 120px;
					background: url(img/header_05.png) no-repeat 0px 0px;
				}
			}
			@keyframes hua{
				0%{
					width: 0px;
				}
				25%{
					width: 30px;
				}
				50%{
					width: 60px;
				}
				75%{
					width: 90px;
				}
				100%{
					width: 120px;
					background: url(img/header_09.png) no-repeat 0px 0px;
				}
			}
			.k1 a:hover .pic1{
				animation: zhuan 2s forwards;
				background: url(img/header_05.png) no-repeat 0px 0px;
			}
			.k2 a:hover .pic2{
				animation: hua 2s forwards;
				background: url(img/header_09.png) no-repeat 0px 0px;
			}
			.t1 img{
				transition: all 2s;
			}
			.t1 img:hover{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
			<div class="header clearfix">
				<div class="logo"><img src="img/logo_170x46.png" /></div>
				<div class="neirong">
					
					<ul class="dd">
						
						<li class="k1"><a href="#"><span class="pic1"></span>返回商城</a> | </li>
						<li><a href="#">商旅频道</a> | </li>
						<li  class="k2"><a href="#"><span class="pic2"></span>积分商城</a> | </li>
						<li><a href="#">商旅频道</a> | </li>
						<li><a href="#">了解彩贝</a> | </li>
						<li><a href="#">彩贝活动</a> | </li>
						<li><a href="#">个人中心</a></li>
						
					</ul>
				</div>
				<div class="nav-right clearfix">
					<div class="t1"><a href="#"><img src="img/iconsB_11.gif" /></a></div>
					<div class="t2"><a href="#"><img src="img/iconsB_12.gif" /></a></div>
					<div class="t3"><a href="#"><img src="img/iconsB_13.png" /></a></div>
				</div>
			</div>
			</div>
		</div>
	</body>
</html>
